<template>
  <div class="home-page">
    <transition name="router-card">
      <div :class="['h-l-container', 'h-l-left']" v-show="showLayout">
        <lark-layout type="left" header-height="0px" width="90%" edge-distance="5%" top="10px">
          <lark-layout-card2 :content-color="contentColor" v-for="(item, index) in layoutCardData_left"
                             :head-data="item.headData"
                             @titleClick="titleClick" :key="index">
            <div class="d-container d-left">
              <div class="d-item" v-for="configItem in item.digitalConfigList">
                <lark-digital-flop :digital-config="configItem" @digClick="digClick"></lark-digital-flop>
              </div>
            </div>
          </lark-layout-card2>
        </lark-layout>
      </div>
    </transition>

    <div class="content-container">
      <page-content @startPalyer="() => {showLayout = false; open = false}"
                    @endPalyer="() => {showLayout = true}"></page-content>
    </div>

    <transition name="router-card">
      <div :class="['h-l-container', 'h-l-right']" v-show="showLayout">
        <lark-layout type="right" header-height="0px" width="90%" edge-distance="5%" top="10px">
          <lark-layout-card2 :content-color="contentColor" v-for="(item, index) in layoutCardData_right"
                             :head-data="item.headData"
                             @titleClick="titleClick" :key="index">
            <div class="d-container d-right">
              <div class="d-item" v-for="configItem in item.digitalConfigList">
                <lark-digital-flop :digital-config="configItem" @digClick="digClick"></lark-digital-flop>
              </div>
            </div>
          </lark-layout-card2>
        </lark-layout>
      </div>
    </transition>


    <el-collapse-transition>
      <statistics @closeSelfAction="open = false" v-show="open" :query-type="tableQueryType">
      </statistics>
    </el-collapse-transition>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, nextTick } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import Statistics from '@/views/industry/homePage/statistics'

  import pageContent from './pageContent'
  import { cardData } from '@/api/industry/homePage'
  import { getToken } from '@/utils/auth'

  export default {
    name: 'homePage',
    props: {},
    components: {
      pageContent,
      Statistics
    },
    setup(props, content) {

      let {} = props

      const data = reactive({
        layoutCardData_left: [],
        layoutCardData_right: [],
        open: false,
        tableQueryType: '',
        contentColor: ['transparent', '#0088fe'],
        showLayout: true
      })

      const titleClick = tData => {
        let { path } = tData
        if (path && path !== '') {
          router.push(path)
        } else {
          Message.info('敬请期待')
        }
      }

      const digClick = dData => {

        let queryList = [
          {
            serverName: 'collect',
            queryType: 'germplasm'
          }
        ]

        let { queryType, serverName } = dData

        if (!queryList.find(item => item.serverName === serverName && item.queryType === queryType)) {
          Message.info('敬请期待')
          return
        }

        data.tableQueryType = `${serverName}_${queryType}`
        data.open = true

      }

      const getCardData = () => {
        cardData().then(res => {
          let { data: { germplasm, specimen, soil, collect, machining, field, garden, laboratory } } = res

          let leftFontSize = '3vh'
          let leftTextFontSize = '2vh'

          data.layoutCardData_left = [
            {
              headData: { label: '资源收集', path: '/ctl', icon: ['diy-icon', 'i-ywcj'] },
              digitalConfigList: [
                {
                  title: '种子',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'germplasm',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #eb1d30; font-size: ${leftFontSize}">${collect.germplasm} </i>份</span>`
                    }
                  ]
                },
                {
                  title: '土壤',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-tr'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'soil',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #1cbaa4; font-size: ${leftFontSize}">${collect.soil}</i> 平米 </span>`
                    }
                  ]
                },
                {
                  title: '标本',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'specimen',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #dcc803; font-size: ${leftFontSize}">${collect.specimen}</i> 类 </span>`
                    }
                  ]
                },
                {
                  title: '水样',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sy'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'water',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #2e78fa; font-size: ${leftFontSize}">${collect.water}</i> 份 </span>`
                    }
                  ]
                }
              ]
            },
            {
              headData: { label: '鉴定评价', path: '/lab', icon: ['diy-icon', 'i-sys'] },
              digitalConfigList: [
                {
                  title: '种子',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'germplasm',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #eb1d30; font-size: ${leftFontSize}">${collect.germplasm} </i>份</span>`
                    }
                  ]
                },
                {
                  title: '土壤',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-tr'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'soil',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #1cbaa4; font-size: ${leftFontSize}">${collect.soil}</i> 平米 </span>`
                    }
                  ]
                },
                {
                  title: '标本',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'specimen',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #dcc803; font-size: ${leftFontSize}">${collect.specimen}</i> 类 </span>`
                    }
                  ]
                },
                {
                  title: '水样',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sy'],
                  border: true,
                  serverName: 'collect',
                  queryType: 'water',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #2e78fa; font-size: ${leftFontSize}">${collect.water}</i> 份 </span>`
                    }
                  ]
                }
              ]
            },
            {
              headData: { label: '种质保存', path: '/gpm', icon: ['diy-icon', 'i-zzzy'] },
              digitalConfigList: [
                {
                  title: '数量',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
                  border: true,
                  serverName: 'germplasm',
                  queryType: 'zk_fk',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black">总库<i style="color: #fa0808; font-size: ${leftFontSize}"> ${germplasm.zk}</i>个</span>`
                    },
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black">分库<i style="color: #fa0808; font-size: ${leftFontSize}"> ${germplasm.fk}</i>个</span>`
                    }
                  ]
                },
                {
                  title: '面积',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-mj'],
                  border: true,
                  serverName: 'germplasm',
                  queryType: 'area',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color:#0ef551; font-size: ${leftFontSize}">${germplasm.area}</i> 平米 </span>`
                    }
                  ]
                },
                {
                  title: '包含种类',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
                  border: true,
                  serverName: 'germplasm',
                  queryType: 'count',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #273ad5; font-size: ${leftFontSize}">${germplasm.count}</i> 种 </span>`
                    }
                  ]
                },
                {
                  title: '种质份数',
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
                  border: true,
                  serverName: 'germplasm',
                  queryType: 'species',
                  config: [
                    {
                      text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #80257b; font-size: ${leftFontSize}">${germplasm.species}</i> 万份 </span>`
                    }
                  ]
                }
              ]
            }

            // {
            //   headData: { label: '种质资源', path: '/gpm', icon: ['diy-icon', 'i-zzzy'] },
            //   digitalConfigList: [
            //     {
            //       title: '数量',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
            //       border: true,
            //       serverName: 'germplasm',
            //       queryType: 'zk_fk',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black">总库<i style="color: #fa0808; font-size: ${leftFontSize}"> ${germplasm.zk}</i>个</span>`
            //         },
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black">分库<i style="color: #fa0808; font-size: ${leftFontSize}"> ${germplasm.fk}</i>个</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '面积',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-mj'],
            //       border: true,
            //       serverName: 'germplasm',
            //       queryType: 'area',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color:#0ef551; font-size: ${leftFontSize}">${germplasm.area}</i> 平米 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '包含种类',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
            //       border: true,
            //       serverName: 'germplasm',
            //       queryType: 'count',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #273ad5; font-size: ${leftFontSize}">${germplasm.count}</i> 种 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '种质份数',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
            //       border: true,
            //       serverName: 'germplasm',
            //       queryType: 'species',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #80257b; font-size: ${leftFontSize}">${germplasm.species}</i> 万份 </span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '标本库', icon: ['diy-icon', 'i-bbk'] },
            //   digitalConfigList: [
            //     {
            //       title: '数量',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
            //       border: true,
            //       serverName: 'specimen',
            //       queryType: 'count',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black">总库<i style="color: #eb1d30; font-size: ${leftFontSize}">${specimen.count} </i>个</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '面积',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-mj'],
            //       border: true,
            //       serverName: 'specimen',
            //       queryType: 'area',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #0ef551; font-size: ${leftFontSize}">${specimen.area}</i> 平米 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '类型',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
            //       border: true,
            //       serverName: 'specimen',
            //       queryType: 'type',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #dcc803; font-size: ${leftFontSize}">${specimen.type}</i> 类 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '标本份数',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
            //       border: true,
            //       serverName: 'specimen',
            //       queryType: 'specimenCount',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #2e78fa; font-size: ${leftFontSize}">${specimen.specimenCount}</i> 万份 </span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '土壤库', icon: ['diy-icon', 'i-trk'] },
            //   digitalConfigList: [
            //     {
            //       title: '数量',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
            //       border: true,
            //       serverName: 'soil',
            //       queryType: 'count',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black">总库<i style="color: #eb1d30; font-size: ${leftFontSize}">${soil.count} </i>个</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '面积',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-mj'],
            //       border: true,
            //       serverName: 'soil',
            //       queryType: 'area',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #1cbaa4; font-size: ${leftFontSize}">${soil.area}</i> 平米 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '类型',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
            //       border: true,
            //       serverName: 'soil',
            //       queryType: 'type',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #dcc803; font-size: ${leftFontSize}">${soil.type}</i> 类 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '土壤',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-tr'],
            //       border: true,
            //       serverName: 'soil',
            //       queryType: 'soilCount',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #2e78fa; font-size: ${leftFontSize}">${soil.soilCount}</i> 份 </span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '野外采集', path: '/ctl', icon: ['diy-icon', 'i-ywcj'] },
            //   digitalConfigList: [
            //     {
            //       title: '种子',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-fs'],
            //       border: true,
            //       serverName: 'collect',
            //       queryType: 'germplasm',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #eb1d30; font-size: ${leftFontSize}">${collect.germplasm} </i>份</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '土壤',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-tr'],
            //       border: true,
            //       serverName: 'collect',
            //       queryType: 'soil',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #1cbaa4; font-size: ${leftFontSize}">${collect.soil}</i> 平米 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '标本',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
            //       border: true,
            //       serverName: 'collect',
            //       queryType: 'specimen',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #dcc803; font-size: ${leftFontSize}">${collect.specimen}</i> 类 </span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '水样',
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sy'],
            //       border: true,
            //       serverName: 'collect',
            //       queryType: 'water',
            //       config: [
            //         {
            //           text: `<span style="font-size:${leftTextFontSize}; color: black"><i style="color: #2e78fa; font-size: ${leftFontSize}">${collect.water}</i> 份 </span>`
            //         }
            //       ]
            //     }
            //   ]
            // }
          ]

          data.layoutCardData_right = [
            {
              headData: { label: '创新育种', icon: ['diy-icon', 'i-jgzx'] },
              digitalConfigList: [
                {
                  title: '数量',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
                  serverName: 'machining',
                  queryType: 'count',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(machining.count)};color: #f8ea11">${machining.count} 个</span>`
                    }
                  ]
                },
                {
                  title: '吞吐量',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-ttl'],
                  serverName: 'machining',
                  queryType: 'throughput',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(machining.throughput)};color: #73cc02">${machining.throughput} 吨</span>`
                    }
                  ]
                }
              ]
            },
            {
              headData: { label: '种子生产', path: '/cpf', icon: ['diy-icon', 'i-czt'] },
              digitalConfigList: [
                {
                  title: '数量',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
                  serverName: 'field',
                  queryType: 'count',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(field.count)};color: #eb1d30">${field.count} 个</span>`
                    }
                  ]
                },
                {
                  title: '品种',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
                  serverName: 'field',
                  queryType: 'varieties',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(field.varieties)};color: #1debdc">${field.varieties} 种</span>`
                    }
                  ]
                }
              ]
            },
            {
              headData: { label: '应用市场', icon: ['diy-icon', 'i-jgzx'] },
              digitalConfigList: [
                {
                  title: '数量',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
                  serverName: 'machining',
                  queryType: 'count',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(machining.count)};color: #f8ea11">${machining.count} 个</span>`
                    }
                  ]
                },
                {
                  title: '吞吐量',
                  border: true,
                  titleIcon: ['diy-icon', 'd-s-icon', 'i-ttl'],
                  serverName: 'machining',
                  queryType: 'throughput',
                  config: [
                    {
                      text: `<span style="font-size:${getFontSize(machining.throughput)};color: #73cc02">${machining.throughput} 吨</span>`
                    }
                  ]
                }
              ]
            }

            // {
            //   headData: { label: '加工中心', icon: ['diy-icon', 'i-jgzx'] },
            //   digitalConfigList: [
            //     {
            //       title: '数量',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
            //       serverName: 'machining',
            //       queryType: 'count',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(machining.count)};color: #f8ea11">${machining.count} 个</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '吞吐量',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-ttl'],
            //       serverName: 'machining',
            //       queryType: 'throughput',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(machining.count)};color: #73cc02">${machining.throughput} 吨</span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '采种田', path: '/cpf', icon: ['diy-icon', 'i-czt'] },
            //   digitalConfigList: [
            //     {
            //       title: '数量',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-sl'],
            //       serverName: 'field',
            //       queryType: 'count',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(field.count)};color: #eb1d30">${field.count} 个</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '品种',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
            //       serverName: 'field',
            //       queryType: 'varieties',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(field.varieties)};color: #1debdc">${field.varieties} 种</span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '资源圃', path: '/nur', icon: ['diy-icon', 'i-zyp'] },
            //   digitalConfigList: [
            //     {
            //       title: '类型',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
            //       serverName: 'garden',
            //       queryType: 'type',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(garden.type)};color: #0ef551">${garden.type} 类</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '品种',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-bb'],
            //       serverName: 'garden',
            //       queryType: 'varieties',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(garden.varieties)};color: #273ad6">${garden.varieties} 种</span>`
            //         }
            //       ]
            //     }
            //   ]
            // },
            // {
            //   headData: { label: '实验室', path: '/lab', icon: ['diy-icon', 'i-sys'] },
            //   digitalConfigList: [
            //     {
            //       title: '类型',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-type'],
            //       serverName: 'laboratory',
            //       queryType: 'type',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(machining.count)};color: #c10ef5">${laboratory.type} 类</span>`
            //         }
            //       ]
            //     },
            //     {
            //       title: '面积',
            //       border: true,
            //       titleIcon: ['diy-icon', 'd-s-icon', 'i-mj'],
            //       serverName: 'laboratory',
            //       queryType: 'area',
            //       config: [
            //         {
            //           text: `<span style="font-size:${getFontSize(machining.count)};color: #d6a027">${laboratory.area} 平米</span>`
            //         }
            //       ]
            //     }
            //   ]
            // }
          ]

        })
      }

      getCardData()

      const getFontSize = num => {
        return `${num % 1000 >= 1 ? 5 : 4}vh`
      }

      return { ...toRefs(data), titleClick, digClick }
    }
  }
</script>

<style lang="scss">
  $full: 100%;
  .home-page {
    width: 100%;
    height: 100%;
    position: relative;


    /* .lark-layout-card {
       .title {
         .dv-border-box-10 {
           svg {
             width: $full !important;
             height: $full !important;
           }

           .border-box-content {
             .title-content {
               height: max-content;
               width: 100%;
             }
           }
         }

       }

       .content {
         .dv-border-box-10.l-c-content {
           .border-box-content {
             width: 100%;
             height: calc(100% - 2px);
             border-radius: 10px;

             .content-container {
               width: calc(100% - 10px);
               height: calc(100% - 20px);
             }
           }
         }
       }
     }*/

    .h-l-container {
      position: absolute;
      width: 20%;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      &.h-l-left {
        left: 0;
        flex-direction: row;
      }

      &.h-l-right {
        flex-direction: row-reverse;
        right: 0;
      }

      .lark-layout-card-2 {
        .title {
          height: 19%;
          padding-left: 9%;
          display: flex;
          flex-direction: row;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 2vh;

          .diy-icon.diy-icon {
            top: 0;
            height: 55%;
            width: 8%;
            font-size: 2vh;
            margin-right: 1vh;
          }
        }

        .content {
          height: 81%;
        }

        .title, .content {
          .diy-icon {
            background-size: 100% 100%;
            width: 32px;
            height: 32px;
            display: inline-block;
            position: relative;
            top: 4px;

            //  吞吐量
            &.i-ttl {
              background-image: url("../../../assets/images/sy.png");
            }

            //  水样
            &.i-sy {
              background-image: url("../../../assets/images/sy.png");
            }

            //  标本
            &.i-bb {
              background-image: url("../../../assets/images/bb.png");
            }

            //  土壤
            &.i-tr {
              background-image: url("../../../assets/images/tr.png");
            }

            //  份数
            &.i-fs {
              background-image: url("../../../assets/images/fs.png");
            }

            //  类型
            &.i-type {
              background-image: url("../../../assets/images/type.png");
            }

            //  面积
            &.i-mj {
              background-image: url("../../../assets/images/mj.png");
            }

            //  数量
            &.i-sl {
              background-image: url("../../../assets/images/sl.png");
            }

            //  种子资源
            &.i-zzzy {
              background-image: url("../../../assets/images/zzzy.png");
            }

            //  标本库
            &.i-bbk {
              background-image: url("../../../assets/images/bbk.png");
            }

            //  土壤库
            &.i-trk {
              background-image: url("../../../assets/images/trk.png");
            }


            //  野外采集
            &.i-ywcj {
              background-image: url("../../../assets/images/ywcj.png");
            }

            //  加工中心
            &.i-jgzx {
              background-image: url("../../../assets/images/jgzx.png");
            }

            //  采种田
            &.i-czt {
              background-image: url("../../../assets/images/czt.png");
            }

            //  资源圃
            &.i-zyp {
              background-image: url("../../../assets/images/zyp.png");
            }

            //  实验室
            &.i-sys {
              background-image: url("../../../assets/images/syshi.png");
            }

            &:before {
              content: "\e78f";
              font-size: 18px;
              visibility: hidden;
            }
          }
        }

        .content {
          .dig-title {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
            line-height: 1;
            font-size: 2vh;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .router-card-enter-active {
      animation: left-enter 1s;
    }

    .router-card-leave-active {
      animation: left-leave 1s;
    }

    @keyframes left-enter {
      0% {
        width: 0px;
      }
      100% {
        width: 20%;
      }
    }

    @keyframes left-leave {
      0% {
        width: 20%;
      }
      100% {
        width: 0px;
      }
    }


    .d-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: 100%;
      justify-content: space-around;
      align-content: space-around;

      &.d-left {
        .d-item {
          .dig-title {
            .diy-icon {
              width: 12%;
              height: 67%;
            }
          }
        }
      }

      &.d-right {
        padding: 20px 0;

        .d-item {
          height: 100%;

          .lark-digital-flop {
            justify-content: flex-start;


            .dig-title {
              align-items: center;


              .diy-icon {
                width: 12%;
                height: 50%;
              }
            }

            .dig-content {
              .dig-text {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
              }
            }

          }

        }
      }

      .d-item {
        flex-basis: 47%;
        height: 36%;

        .dig-title {
          height: 36%;
          color: black;

          .diy-icon {
            right: 1vh;
            top: -2%;
          }
        }

        .dig-content {
          height: 64%;
        }
      }
    }

    .left-container, .content-container, .right-container {
      height: 100%;
      width: max-content;
    }

    .content-container {
      height: $full;
      width: $full;
    }

    .statistics-root {
      position: absolute;
      bottom: 5px;
      left: 22.5%;
      /*width: calc(100% - 870px);*/
      width: 55%;
    }
  }
</style>
